<template>
  <div class="container">
    <h3 class="h3">鹰眼控件</h3>
    <div
      id="vue-openlayers"
      class="map-x"
    />
  </div>
</template>
<script>
import 'ol/ol.css'
import {
  Map,
  View
} from 'ol'
import Tile from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
// 以下代码行为关注点
import * as control from 'ol/control'

export default {
  name: 'Zoom',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png'
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [114.064839, 22.548857],
          zoom: 4
        }),
        // 以下代码块为关注点
        controls: control.defaults({
          zoom: false,
          doubleClickZoom: false,
          rotate: false,
          attribution: false
        }).extend([
          new control.OverviewMap({
            collapsed: true,
            collapsible: true,
            rotateWithView: true
          })
        ])
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
</style>

